<template>
  <div>
    目录导航
    <div v-for="item in routes">
      <group v-if="!item.hidden" :title="item.name">
        <cell v-if="!haveChild(item)" :title="item.name" is-link :link="item.path"></cell>
        <div v-if="haveChild(item)" v-for="children in item.children" is-link>
          <cell v-if="!children.hidden" :title="children.name" :link="item.path+'/'+children.path"></cell>
        </div>
      </group>
    </div>
  </div>
</template>
<script>
  import {Cell} from "vux";
  import {Group} from "vux";

  export default {
    components: {
      Cell,
      Group
    },
    data() {
      return {
        routes: []
      };
    },
    methods: {
      haveChild(item) {
        return item.hasOwnProperty("children") && item.children.length > 0
      }
    },
    mounted() {
      this.routes = this.$router.options.routes;
    }
  };
</script>
